<template>
  <div>
    <!-- nav -->
    <van-nav-bar title="【华硕好屏】无畏高性能轻薄本_华硕商城" left-arrow  @click-left="onClickLeft">
  <template #right>
    <van-icon name="weapp-nav" size="18" color="black" />
  </template>
</van-nav-bar>
<!-- swipe -->
<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(v, index) in img" :key="index">
    <img v-lazy="v" />
  </van-swipe-item>
</van-swipe>
<!-- 热销好物 -->
<p><img :src="title1" alt=""></p>
<!-- goods -->

<div class="flex">
        <div class="box" v-for="(v,index) in myimg1" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname1[index] }}</p>
                <p class="introduce">{{ introduce1[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money1[index] }}</p><p class="befor">￥{{ befor1[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
<!-- goods无双 -->
<p><img :src="unpar" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg2" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname2[index] }}</p>
                <p class="introduce">{{ introduce2[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money2[index] }}</p><p class="befor">￥{{ befor2[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
<!-- goods无畏pro -->

<p><img :src="title2" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg3" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname3[index] }}</p>
                <p class="introduce">{{ introduce3[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money3[index] }}</p><p class="befor">￥{{ befor3[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>


    <!--  -->
    <p><img :src="title3" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg4" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname4[index] }}</p>
                <p class="introduce">{{ introduce4[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money4[index] }}</p><p class="befor">￥{{ befor4[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
    <p><img :src="title4" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg5" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname5[index] }}</p>
                <p class="introduce">{{ introduce5[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money5[index] }}</p><p class="befor">￥{{ befor5[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
    <p><img :src="title5" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg6" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname6[index] }}</p>
                <p class="introduce">{{ introduce6[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money6[index] }}</p><p class="befor">￥{{ befor6[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
    <p><img :src="title6" alt=""></p>
<div class="flex">
        <div class="box" v-for="(v,index) in myimg7" :key="index">
            <img :src="v" alt="">
            <div class="text">

                <p>{{ urname7[index] }}</p>
                <p class="introduce">{{ introduce7[index] }}</p>
                <div class="gifts">赠品</div>
                <div class="display">
                    <div class="left"><p class="money">￥{{ money7[index] }}</p><p class="befor">￥{{ befor7[index] }}</p></div>
                    <div class="right"> <p>立即</p><p>抢购</p> </div>
                </div>
            </div>
        </div>
    </div>
    <p><img :src="title7" alt=""></p>
    <p><img :src="banner" alt=""></p>
  </div>
</template>

<script>

//导航导入
import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);


//轮播图
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
import { Lazyload } from 'vant';
Vue.use(Lazyload);


export default {
    components:{
    },
    data(){
        return{
            img:[],
            //goods好物
            title1:"",
            myimg1:[],
            urname1:[],
            introduce1:[],
            money1:[],
            befor1:[],
            //goods 无双
            unpar:"",
            myimg2:[],
            urname2:[],
            introduce2:[],
            money2:[],
            befor2:[],
            //无畏
            title2:"",
            myimg3:[],
            urname3:[],
            introduce3:[],
            money3:[],
            befor3:[],
            //
            title3:"",
            myimg4:[],
            urname4:[],
            introduce4:[],
            money4:[],
            befor4:[],
            //
            title3:"",
            myimg4:[],
            urname4:[],
            introduce4:[],
            money4:[],
            befor4:[],
            //
            title4:"",
            myimg5:[],
            urname5:[],
            introduce5:[],
            money5:[],
            befor5:[],
            //
            title5:"",
            myimg6:[],
            urname6:[],
            introduce6:[],
            money6:[],
            befor6:[],
            //
            title6:"",
            myimg7:[],
            urname7:[],
            introduce7:[],
            money7:[],
            befor7:[],

            //
            title7:"",
            banner:""
        }
    },
    methods:{
        // this.$router.push
        onClickLeft(){
            this.$router.push('/homepage').catch(err=>{})
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/navigation5",
            method:"get",
        }).then(res=>{
            res.data[0].data.swipe.forEach(element => {
                // swipe
                this.img.push(element)
            });
            // res.data[0].data.data1.forEach(item=>{
            //     // console.log(item);
            // })
            // console.log( res.data[0].data.data1);
                // goods好物
            res.data[0].data.data1.forEach(item=>{
                this.title1=res.data[0].data.data1[0].title
                this.money1.push(item.money)
                this.befor1.push(item.befor)
                this.introduce1.push(item.introduce)
                this.urname1.push(item.urname)
                this.myimg1.push(item.myimg)
            })
                //goods无双

                res.data[0].data.data2.forEach(item1=>{
                this.unpar=res.data[0].data.unpar

                this.title2=res.data[0].data.data1[0].title
                this.money2.push(item1.money)
                this.befor2.push(item1.befor)
                this.introduce2.push(item1.introduce)
                this.urname2.push(item1.urname)
                this.myimg2.push(item1.myimg)
            })
            //无畏
            // console.log(res.data[0].data.data3[0].title);
                res.data[0].data.data3.forEach(item1=>{
                this.title2=res.data[0].data.data3[0].title
                this.money3.push(item1.money)
                this.befor3.push(item1.befor)
                this.introduce3.push(item1.introduce)
                this.urname3.push(item1.urname)
                this.myimg3.push(item1.myimg)
            })

                res.data[0].data.data4.forEach(item1=>{
                this.title3=res.data[0].data.data4[0].title
                this.money4.push(item1.money)
                this.befor4.push(item1.befor)
                this.introduce4.push(item1.introduce)
                this.urname4.push(item1.urname)
                this.myimg4.push(item1.myimg)
            })

                res.data[0].data.data5.forEach(item1=>{
                this.title4=res.data[0].data.data5[0].title
                this.money5.push(item1.money)
                this.befor5.push(item1.befor)
                this.introduce5.push(item1.introduce)
                this.urname5.push(item1.urname)
                this.myimg5.push(item1.myimg)
            })

                res.data[0].data.data6.forEach(item1=>{
                this.title5=res.data[0].data.data6[0].title
                this.money6.push(item1.money)
                this.befor6.push(item1.befor)
                this.introduce6.push(item1.introduce)
                this.urname6.push(item1.urname)
                this.myimg6.push(item1.myimg)
            })
            
                res.data[0].data.data7.forEach(item1=>{
                this.title6=res.data[0].data.data7[0].title
                this.money7.push(item1.money)
                this.befor7.push(item1.befor)
                this.introduce7.push(item1.introduce)
                this.urname7.push(item1.urname)
                this.myimg7.push(item1.myimg)
            })

                this.title7=res.data[0].data.data9[0].title
                this.banner=res.data[0].data.data9[0].banner
        })
    }
}
</script>

<style scoped>
/deep/ .van-nav-bar .van-icon{
    color: black !important;
}
/deep/.van-nav-bar__title{
    font-size: 12px !important;
}
/deep/.van-nav-bar__title{
    max-width: 75% !important;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-swipe-item img{
    width: 100%;
  }
  p img { width: 100%;margin-bottom: 5px; }


  /* goods好物 */
  .flex{
    display: flex;
    flex-wrap: wrap;
}
.box{
    width: 48%;
    margin-left: 2%;
    margin-bottom: 10px;
    
}

    .box img {
        height: 120px;
        width: 90%;
    }
    .introduce{
        font-size: 12px;
        color: gray;
    }
    .gifts{
        width: 40px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        background-color: #f5a623;
        color: white;
    }
    .left{
        width: 60px;
    }
    .display{
        display: flex;
    }
    .right{
        width: 40px;
        height: 40px;
        background-color: #f9453d;
        border-radius: 3px;
        font-size: 14px;
        text-align: center;color: white;
        margin-left: 40px;
    }
    .money{
        color: red;
    }
    .befor{
        font-size: 12px;
        text-decoration: line-through;
        color: gray;
    }
    .text{
        padding: 0px 0px 0px 3px ;
    }
</style>